<template>
    <div class="block">
        <el-avatar shape="square" :size="220" :src="stuProfile.headimgurl ? stuProfile.headimgurl : imageUrl"/>
    </div>
    <el-descriptions
    title="学员资料"
    direction="vertical"
    :column="3"
    border>
    <el-descriptions-item label="sId">{{stuProfile.sId}}</el-descriptions-item>
    <el-descriptions-item label="姓名">
      <el-tag size="large" class="name">{{stuProfile.name}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="年龄" width="40%">{{stuProfile.age}}</el-descriptions-item>
    <el-descriptions-item label="班级">{{stuProfile.class}}</el-descriptions-item>
    <el-descriptions-item label="学历">
      <el-tag size="large" class="degree">{{stuProfile.degree}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="项目地址" width="40%">{{stuProfile.productUrl}}</el-descriptions-item>
    <el-descriptions-item label="描述">{{stuProfile.description}}</el-descriptions-item>
    <el-descriptions-item label="城市">{{stuProfile.city}}</el-descriptions-item>
    <el-descriptions-item label="创建时间" width="40%">{{stuProfile.cTime}}</el-descriptions-item>
  </el-descriptions>
  <div class="button">
    <el-button type="primary" @click="back">点击返回列表</el-button>
  </div>
</template>

<script setup>
// 引入用户store
import {useUser} from "@/store/users.js"
import { storeToRefs } from "pinia";
import {ref} from "vue"
// 引入路由
import {useRouter} from "vue-router"
// 使用路由
let router = useRouter()
// 使用用户store
let userStore = useUser()
// 解析学员信息
let {stuProfile} = storeToRefs(userStore)
// console.log(stuProfile)

let imageUrl = ref('')

// 返回列表
let back = () => {
  router.push('/studentManager/stuProduct')
}

</script>





<script>
export default{
    meta:{
        title: 'xyzl', 
        name: '学员资料',
        routeName:"stuProfile",
        icon:'#icon-shuju1'
    }
}


</script>


<style lang="less" scoped>
.block{
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    .el-avatar>img {
        display: block;
        height: 100%;
    }
}

.el-descriptions{
  margin-bottom: 10px;
    :deep(.el-descriptions__title){
      font-size: 18px !important;
    }
  
    
    :deep(.el-descriptions__cell){
        height: 50px;
        font-size: 16px !important;
    }

    .name{
            background-color: #67C23A;
            color: #fff;
            // font-size: 12px;
    }
  }

  .button{
      display: flex;
      justify-content: center;

      .el-button{
        height: 40px;
        font-size: 18px;
      }
  }

</style>